<template>
    <div class="header">
        <div class="logo-wrapper">
            <img src="./logo.jpg" width="60" height="60"><span>萝卜药店</span>
        </div>
        <div class="tab">
            <div class="tab-item">
                <router-link to="/home">首页</router-link>
            </div>
            <div class="tab-item">
                <router-link to="/store">药店</router-link>
            </div>
            <div class="tab-item">
                <router-link to="/search">搜索</router-link>
            </div>
        </div>
        <div class="login">
            <a href="#">登录</a>
            <a href="#">注册</a>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .header {
        position relative
        width 100%
        height 60px

        .logo-wrapper {
            position absolute
            left 20px
            top 0
            width 300px
            height 50px
            padding 5px

            img {
                display inline-block
                vertical-align top
                width 50px
                height 50px
            }

            span {
                display inline-block
                vertical-align top
                font-size 25px
                font-weight 700
                font-family "微软雅黑", Arial, sans-serif
                line-height 50px
                padding-left 10px
            }
        }

        .tab {
            display flex
            justify-content center
            width 800px
            height 60px
            margin 0 auto

            .tab-item {
                width 100px
                height 40px
                margin 9px 8px
                line-height 40px
                text-align center
                box-shadow 0 0 20px darkgrey

                a {
                    display block
                    color gray
                    font-weight 500

                    &.active {
                        background #007bff
                        color white
                        border-radius 5px
                    }
                }
            }
        }

        .login {
            position absolute
            top 0
            right 20px
            line-height 60px

            a {
                color #007bff
                padding-left 10px
            }
        }
    }
</style>
